<!--
 * @Descripttion: 
 * @version: 
 * @Author: lyw
 * @Date: 2022-03-11 16:57:07
 * @LastEditors: fengweicong 75202172+fengweicong@users.noreply.github.com
 * @LastEditTime: 2022-07-13 21:13:20
-->
<template>
  <div class="login">
    <el-form
      :model="tempUser"
      status-icon
      :rules="rules"
      ref="tempUser"
      label-width="120px"
    >
      <el-form-item label="" prop="phone">
        <span slot="label">
          <el-dropdown>
            <span class="el-dropdown-link">
              中国大陆+86<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>中国大陆+86</el-dropdown-item>
              <el-dropdown-item>中国香港+852</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </span>

        <el-input
          class="phoneInput"
          v-model="tempUser.phone"
          placeholder="请输入手机号"
          maxlength="11"
        ></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="code">
        <el-input
          class="codeInput"
          v-model="tempUser.code"
          placeholder="请输入密码"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <!-- <el-button @click="getCode" style="width: 135px">{{ showtime }}</el-button> -->
    <div align="center">
      <el-button class="certain" @click="Login">登录</el-button>
    </div>
    <div align="center">
      <el-checkbox v-model="agree"></el-checkbox>
      <span>同意《用户协议》和《隐私政策》</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.tempUser.code !== "") {
          // this.$refs.tempUser.validateField("code");
        }
        callback();
      }
    };
    //验证手机号
    var validatePhone = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else {
        if (/^1[23456789]\d{9}$/.test(value)) {
          callback();
        } else {
          callback(new Error("手机号格式错误"));
        }
      }
    };
    return {
      // phone: "12222222222",
      agree: false,
      // code: "123456",
      showtime: "获取验证码",
      user: [],
      tempUser: { phone: "12222222222", code: "123456" },
      rules: {
        code: [{ validator: validatePass, trigger: "blur" }],
        phone: [{ validator: validatePhone, trigger: "blur" }],
      },
    };
  },
  props: ["LoginStatus"],
  methods: {
    getCode() {
      //获取验证码
      console.log(this.LoginStatus);
      let time = 60;
      let timer = setInterval(() => {
        if (time == 0) {
          clearInterval(timer);
          this.showtime = "获取验证码";
        } else {
          this.showtime = time + "秒后重试";
          time--;
        }
      }, 1000);
    },
    Login() {
      this.$refs["tempUser"].validate((valid) => {
        if (!valid) {
          return this.$message({
            message: "请填写完整信息",
            type: "warning",
          });
        }
      });

      if (!this.agree) {
        alert("请勾选复选框");
      } else {
        this.$axios({
          methed: "get",
          url: "http://localhost:3000/login_account",
        }).then((res) => {
          this.user = res.data.filter(
            (item) => item.account == parseInt(this.tempUser.phone)
          );
          console.log(this.user);
          if (this.user[0].account_password == parseInt(this.tempUser.code)) {
            this.$message.success({
              message: "登录成功",
              duration: 1000,
            });
            this.$store.state.user.account_id = this.user[0].id
            localStorage.setItem("Account_id", this.user[0].id);
            this.$emit("HasLogin", true, this.user);
          } else {
            this.user = [];
            alert("密码错误");
          }
        });
      }
    },
    //表单验证
  },
};
</script>

<style scoped>
.login {
  padding: 15px;
}
.login .phoneInput {
  width: 87%;
}
.login .codeInput {
  width: 87%;
}
.login .certain {
  width: 200px;
  margin-bottom: 5px;
}
</style>